<template>
  <a-row
    :gutter="20"
    type="flex"
    class="row-bg"
    justify="center"
    style="margin-bottom: 40px"
  >
    <a-col :span="6">
      <div class="show-header" style="background: #67c23a">
        <div class="show-num">{{ questionCount }}</div>
        <div class="bottom-text">题目总数</div>
      </div>
    </a-col>
    <a-col :span="6">
      <div class="show-header" style="background: #e6a23c">
        <div class="show-num">{{ userCount }}</div>
        <div class="bottom-text">用户总数</div>
      </div>
    </a-col>
    <a-col :span="6">
      <div class="show-header" style="background: #f56c6c">
        <div class="show-num">{{ questionSubmitCount }}</div>
        <div class="bottom-text">提交总数</div>
      </div>
    </a-col>
    <a-col :span="6">
      <div class="show-header" style="background: #409eff">
        <div class="show-num">{{ todayUserNewAddCount }}</div>
        <div class="bottom-text">今日新增用户</div>
      </div>
    </a-col>
  </a-row>

  <div style="display: flex">
    <a-card style="flex: 1" title="提交趋势">
      <div ref="barChart" :style="{ width: '700px', height: '250px' }"></div>
    </a-card>
    <a-card style="margin-left: 20px; flex: 1" title="用户结构">
      <div ref="pieChart" :style="{ width: '700px', height: '250px' }"></div>
    </a-card>
  </div>

  <a-card class="box-card" style="margin-top: 30px">
    <div slot="header" class="clearfix">
      <span style="color: #000000; font-weight: 600; margin-bottom: 10px">
        热门题目
      </span>
      <a-divider></a-divider>
    </div>
    <div v-for="(question, index) in hotQuestion" :key="question.id">
      <div class="text item">
        <span class="hot-question-ranking">第 {{ index + 1 }} 名</span>
        <a-link
          :loading="loadStatus"
          class="hot-question-content"
          @click="toDoQuestionView(question.id)"
        >
          {{ question.title }}
        </a-link>
        <a-divider></a-divider>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, reactive, ref } from "vue";
import { EchartsControllerService } from "../../generated";
import { Message } from "@arco-design/web-vue";
import { useRouter } from "vue-router";

const router = useRouter();

const barChart = ref<HTMLElement>();
const myChart1 = ref<any>();

// 点击链接加载状态
const loadStatus = ref(false);

// 绘制柱形图
function initBarEcharts() {
  myChart1.value = echarts.init(barChart.value!);
  myChart1.value.setOption({
    tooltip: {
      trigger: "item",
    },
    xAxis: {
      type: "category",
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "提交数",
        data: submitTrend,
        type: "bar",
        label: {
          show: true,
          position: "top",
        },
      },
    ],
  });
}

// 绘制饼图
const pieChart = ref<HTMLElement>();
const myChart2 = ref<any>();

function initPieEcharts() {
  myChart2.value = echarts.init(pieChart.value!);
  myChart2.value.setOption({
    tooltip: {
      trigger: "item",
      formatter: "{b}:{c}（{d}%）",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        type: "pie",
        radius: "50%",
        data: [
          { value: userStruct.user.count, name: "普通用户" },
          { value: userStruct.admin.count, name: "管理员" },
          { value: userStruct.ban.count, name: "封号" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
}

/*获取用户总数*/
let userCount: any = ref(0);
const getUserCount = async () => {
  const res = await EchartsControllerService.userCountUsingGet();
  if (res.code === 0) {
    userCount.value = res.data;
  } else {
    Message.error("获取用户总数失败");
  }
};

/*获取题目总数*/
let questionCount: any = ref(0);
const getQuestionCount = async () => {
  const res = await EchartsControllerService.questionCountUsingGet();
  if (res.code === 0) {
    questionCount.value = res.data;
  } else {
    Message.error("获取题目总数失败");
  }
};

/*获取题目提交总数*/
let questionSubmitCount: any = ref(0);
const getQuestionSubmitCount = async () => {
  const res = await EchartsControllerService.questionSubmitCountUsingGet();
  if (res.code === 0) {
    questionSubmitCount.value = res.data;
  } else {
    Message.error("获取提交总数失败");
  }
};

/*获取今日新增用户总数*/
let todayUserNewAddCount: any = ref(0);
const getTodayUserNewAddCount = async () => {
  const res = await EchartsControllerService.userTodayAddCountUsingGet();
  if (res.code === 0) {
    todayUserNewAddCount.value = res.data;
  } else {
    Message.error("获取今日新增用户数量失败");
  }
};

/*获取提交趋势数组*/
let submitTrend: Array<number> = reactive([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
const getSubmitTrend = async () => {
  const res = await EchartsControllerService.questionSubmitTrendUsingGet();
  if (res.code === 0) {
    const arr = res.data as any;
    for (let i = 0; i < arr.length; i++) {
      submitTrend[arr[i].month - 1] = arr[i].count;
    }
  } else {
    Message.error("获取提交趋势失败");
  }
};

/*获取用户结构*/
let userStruct: any = reactive({});
const getUserStruct = async () => {
  const res = await EchartsControllerService.userStructureUsingGet();
  if (res.code === 0) {
    userStruct = res.data;
  } else {
    Message.error("获取用户结构失败");
  }
};

/*获取热门题目*/
let hotQuestion: any = ref([]);
const getHotQuestion = async () => {
  const res = await EchartsControllerService.getHotQuestionUsingGet();
  if (res.code === 0) {
    hotQuestion.value = res.data;
  } else {
    Message.error("获取热门题目失败");
  }
};

/**
 * 点击热门题目，去往做题页面
 * @param id 题目id
 */
const toDoQuestionView = (id: number) => {
  loadStatus.value = true;
  setTimeout(() => {
    loadStatus.value = false;
  }, 3000);
  router.push({
    path: `/question/doQuestion/${id}`,
  });
};

onMounted(async () => {
  await Promise.all([
    getUserCount(),
    getQuestionCount(),
    getQuestionSubmitCount(),
    getTodayUserNewAddCount(),
    getSubmitTrend(),
    getUserStruct(),
    getHotQuestion(),
  ]);
  initBarEcharts();
  initPieEcharts();
});
</script>

<style scoped>
/*展示框头部*/
.show-header {
  position: relative;
  color: #fff;
  height: 80px;
  border-radius: 5px;
}

/*展示数量*/
.show-num {
  font-size: 38px;
  font-weight: 600;
  padding: 5px;
  text-align: center;
}

/*展示框底部文字*/
.bottom-text {
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  height: 25px;
  line-height: 25px;
  text-align: center;
  position: absolute;
  font-weight: 600;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

/*热门题目排行榜名次*/
.hot-question-ranking {
  font-weight: 600;
  font-size: 14px;
}

/*热门题目排行榜内容*/
.hot-question-content {
  margin-left: 30px;
}
</style>